<template>
  <div>
    <topbar></topbar>
    <div class="content">
      <div class="main">
        <div class="title">
          <div class="title-left">
            <p class="title-left-title">{{ article.title }}</p>
            <p class="information"> <span style="color: #3bbcf0; margin-right: 20px">{{ article.username}}</span>{{ article.posttime }}</p>
          </div>
          <div class="title-right">
            <el-avatar size="large" :src="'http://www.liujn.top/bbs/api' + article.avatar" v-if="show" class="avatar"></el-avatar>
          </div>
        </div>
        <div class="article-main">
          <p v-for="(item, index) in this.textArr" :key="index" class="contentFont">{{ item }}</p>
        </div>
        <el-image :src="'http://www.liujn.top/bbs/api' + article.image" v-if="show" class="img" v-image-preview></el-image>
      </div>

      <div class="reply">
        <leavemsg :list="this.article.reply2s" v-if="show"></leavemsg>
        <input-comment></input-comment>
      </div>
    </div>
    <footbar></footbar>
  </div>
</template>

<script>
import topbar from '../public/topbar.vue'
import footbar from '../public/footbar.vue'
import leavemsg from './messageList.vue'
import inputComment from './input.vue'

export default {
  data () {
    return {
      article: [],
      textArr: [],
      show: false,
    }
  },
  mounted() {
    this.getArticle()
  },
  methods: {

    // 获取数据，然后按数组里的 id 进行排序
    // 再在帖子详情里 按照 post(楼层) 进行排序
    getArticle() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(255, 255, 255, 0.7)'
      });
      // this.axios.get('/api/Allposts/seek').then((res) => {
      this.axios.get('http://www.liujn.top/bbs/api/Allposts/seek').then((res) => {
        loading.close();
        let list = res.data
        const handle = (property) => {
          return (a, b) => {
            const val1 = a[property]
            const val2 = b[property]
            return val1 - val2
          }
        }
        list.sort(handle('id'))
        for(let i = 0; i < list.length; i++) {
          list[i].reply2s.sort(handle('post'))
        }
        this.article = list[this.$route.params.id - 1]
        if(this.$route.params.id == 51){
          this.article.reply2s.reverse()
        }
        this.article.posttime = this.changeTime(this.article.posttime)
        this.textArr = this.article.text.split("\n")
        this.show = true
      })
    },
    changeTime(time) {
      return new Date(+new Date(time)+8*3600*1000).toISOString().replace(/T/g,' ').replace(/\.[\d]{3}Z/,'')
    }
  },
  name: 'articledetail',
  components: {
    topbar,
    footbar,
    leavemsg,
    inputComment
  }
}
</script>

<style scoped lang="sass">
  .content
    width: 100%
    background-image: url("../../assets/bg9.jpg")
    background-size: 100% 100%
    background-size: 1920px 100%
    background-attachment: fixed
    background-repeat: no-repeat
    display: flex
    flex-direction: column
  

  .main 
    margin: 20px auto 0px auto
    min-height: 300px
    width: 76%
    background-color: #fff
    padding: 2%
    display: flex
    flex-direction: column
    // border-bottom: 1px solid #ccc
  

  .title 
    width: 100%
    display: flex
    justify-content: space-between
    padding-bottom: 10px
    border-bottom: 1px solid #ccc
  

  .title-left 
    display: flex
    flex-direction: column
    align-items: flex-start
    .title-left-title
      font-size: 26px
      color: #666
      margin-bottom: 0px 
      margin-top: 10px
      text-align: start
    .information
      margin: 0
      font-size: 14px 
      text-align: start
  

  .title-right
    width: 60px
    margin-top: 5px
    // background-color: #eee
    display: flex
    flex-direction: column
    justify-content: flex-end
    .avatar
      width: 60px
      height: 60px
  
  .article-main
    text-align: left

  .img
    width: 50%
    margin: 0px auto

  .contentFont
    padding: 0px 20px 0px 20px
    line-height: 35px
    letter-spacing: 2px
    text-align: justify

  @media screen and (max-width: 768px) 
    .main 
      margin: 20px auto 0px auto
      min-height: 300px
      width: 90%
      background-color: #fff
      padding: 2%
      display: flex
      flex-direction: column

    .title-left 
      display: flex
      flex-direction: column
      align-items: flex-start
      .title-left-title
        font-size: 26px
        color: #666
        margin-bottom: 0px 
        margin-top: 10px
        text-align: start

    .img
      width: 80%
      margin: 0px auto
</style>
